import React, {useEffect, useState} from 'react'
import {Button, Table, Modal, Tree} from "antd";
import axios from "axios";
import {DeleteOutlined, ExclamationCircleOutlined, FormOutlined} from "@ant-design/icons";


const {confirm}=Modal



export default function RoleList() {
    const [isModalOpen, setIsModalOpen] = useState(false);


    const [dataSource, setdatasource] = useState([])

    const [rightList, setRightList] = useState([])
    const [currentRights, setCurrentRights] = useState([])
    const [currentId, setCurrentId] = useState(0)

    useEffect(()=>{
        axios.get("http://localhost:5000/roles").then(r => {setdatasource(r.data)})
    }, [])

    useEffect(()=>{
        axios.get("http://localhost:5000/rights?_embed=children").then(
            r=>{setRightList(r.data)
                console.log(r.data)
            console.log(rightList)}
        )
    },[])


    const columns = [{
        title: 'ID',
        dataIndex: 'id',
        render:(id)=>{
            return <b>{id}</b>
        }
    },{
        title: '名称',
        dataIndex: 'roleName',
        // render:(roleName)=>{
        //     return <></>
        //
        // }
    },{
        title: '操作',
        render:(item)=>{
            return <div>
                <Button type="danger" shape="circle" icon={<DeleteOutlined />} onClick={()=>confirmMethod(item)}></Button>

            <Button type="primary" shape="circle" icon={<FormOutlined />} onClick={()=>{
                setIsModalOpen(true)
                //点击编辑的时候的初始化
                setCurrentRights(item.rights)
                //当前母数组ID赋给这个临时变量
                setCurrentId(item.id)
            }
            }
                    ></Button>

        </div>
        }
    }
    ]
const treeData=[]


    const deleteMethod = (item)=>{
        console.log(item)

    }
    const confirmMethod = (item) =>{
        confirm(
            {
            title: '你确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            content: 'Some descriptions',
            onOk() {
                // console.log('确定');
                deleteMethod(item)
            },
            onCancel() {
                console.log('删除');
            },
        });
    }

    const handleOk = () => {
        setIsModalOpen(false);
        console.log(currentRights.checked)
        //遍历然后判断
        setdatasource(dataSource.map(item=>{
            //定位母数组值
            if(item.id === currentId){
                return{
                    //保存item内容
                    ...item,
                    //当前rights数值赋给了指定item项的rights
                    rights: currentRights
                }
            }
            return item
        }))
        //patch
        axios.patch(`http://localhost:5000/roles/${currentId}`,{rights: currentRights})
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const onCheck = (checkKeys)=>{
        console.log(checkKeys)
        //check属性值(此窗体所有已勾选孩子item的rights)
        setCurrentRights(checkKeys)

    }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns}  rowKey={(item)=>item.id}
            ></Table>


                <Modal title="权限分配" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Tree
                        checkable

                        // onSelect={onSelect}
                        // onCheck={onCheck}
                        checkedKeys = {currentRights}
                        onCheck={onCheck}
                        checkStrictly = {true}
                        treeData={rightList}
                    />
                </Modal>


        </div>
    )
}
